<template>
  <div>
      <table>
        <tr>
          <th>Rate</th>
          <th>Mean</th>
          <th>1 min</th>
          <th>5 min</th>
          <th>15 min</th>
        </tr>
        <tbody>
          <tr>
            <td>Messages in /sec</td>
            <td><a-tag :color="tagColor">{{metrics['BrokerTopicMetrics']['MessagesInPerSec']['MeanRate'].toFixed(2)}}</a-tag></td>
            <td><a-tag :color="tagColor">{{metrics['BrokerTopicMetrics']['MessagesInPerSec']['OneMinuteRate'].toFixed(2)}}</a-tag></td>
            <td><a-tag :color="tagColor">{{metrics['BrokerTopicMetrics']['MessagesInPerSec']['FiveMinuteRate'].toFixed(2)}}</a-tag></td>
            <td><a-tag :color="tagColor">{{metrics['BrokerTopicMetrics']['MessagesInPerSec']['FifteenMinuteRate'].toFixed(2)}}</a-tag></td>
          </tr>
          <tr>
            <td>Bytes in /sec</td>
            <td><a-tag :color="tagColor">{{metrics['BrokerTopicMetrics']['BytesInPerSec']['MeanRate'].toFixed(2)}}</a-tag></td>
            <td><a-tag :color="tagColor">{{metrics['BrokerTopicMetrics']['BytesInPerSec']['OneMinuteRate'].toFixed(2)}}</a-tag></td>
            <td><a-tag :color="tagColor">{{metrics['BrokerTopicMetrics']['BytesInPerSec']['FiveMinuteRate'].toFixed(2)}}</a-tag></td>
            <td><a-tag :color="tagColor">{{metrics['BrokerTopicMetrics']['BytesInPerSec']['FifteenMinuteRate'].toFixed(2)}}</a-tag></td>
          </tr>
          <tr>
            <td>Bytes out /sec</td>
            <td><a-tag :color="tagColor">{{metrics['BrokerTopicMetrics']['BytesOutPerSec']['MeanRate'].toFixed(2)}}</a-tag></td>
            <td><a-tag :color="tagColor">{{metrics['BrokerTopicMetrics']['BytesOutPerSec']['OneMinuteRate'].toFixed(2)}}</a-tag></td>
            <td><a-tag :color="tagColor">{{metrics['BrokerTopicMetrics']['BytesOutPerSec']['FiveMinuteRate'].toFixed(2)}}</a-tag></td>
            <td><a-tag :color="tagColor">{{metrics['BrokerTopicMetrics']['BytesOutPerSec']['FifteenMinuteRate'].toFixed(2)}}</a-tag></td>
          </tr>
          <tr>
            <td>Bytes rejected /sec</td>
            <td><a-tag :color="tagColor">{{metrics['BrokerTopicMetrics']['BytesRejectedPerSec']['MeanRate'].toFixed(2)}}</a-tag></td>
            <td><a-tag :color="tagColor">{{metrics['BrokerTopicMetrics']['BytesRejectedPerSec']['OneMinuteRate'].toFixed(2)}}</a-tag></td>
            <td><a-tag :color="tagColor">{{metrics['BrokerTopicMetrics']['BytesRejectedPerSec']['FiveMinuteRate'].toFixed(2)}}</a-tag></td>
            <td><a-tag :color="tagColor">{{metrics['BrokerTopicMetrics']['BytesRejectedPerSec']['FifteenMinuteRate'].toFixed(2)}}</a-tag></td>
          </tr>
          <tr>
            <td>Failed fetch request /sec</td>
            <td><a-tag :color="tagColor">{{metrics['BrokerTopicMetrics']['FailedFetchRequestsPerSec']['MeanRate'].toFixed(2)}}</a-tag></td>
            <td><a-tag :color="tagColor">{{metrics['BrokerTopicMetrics']['FailedFetchRequestsPerSec']['OneMinuteRate'].toFixed(2)}}</a-tag></td>
            <td><a-tag :color="tagColor">{{metrics['BrokerTopicMetrics']['FailedFetchRequestsPerSec']['FiveMinuteRate'].toFixed(2)}}</a-tag></td>
            <td><a-tag :color="tagColor">{{metrics['BrokerTopicMetrics']['FailedFetchRequestsPerSec']['FifteenMinuteRate'].toFixed(2)}}</a-tag></td>
          </tr>
          <tr>
            <td>Failed produce request /sec</td>
            <td><a-tag :color="tagColor">{{metrics['BrokerTopicMetrics']['FailedProduceRequestsPerSec']['MeanRate']}}</a-tag></td>
            <td><a-tag :color="tagColor">{{metrics['BrokerTopicMetrics']['FailedProduceRequestsPerSec']['OneMinuteRate']}}</a-tag></td>
            <td><a-tag :color="tagColor">{{metrics['BrokerTopicMetrics']['FailedProduceRequestsPerSec']['FiveMinuteRate']}}</a-tag></td>
            <td><a-tag :color="tagColor">{{metrics['BrokerTopicMetrics']['FailedProduceRequestsPerSec']['FifteenMinuteRate']}}</a-tag></td>
          </tr>
        </tbody>
      </table>
  </div>
</template>

<script>
  export default {
    name: "BrokerMessageMetric",
    props: {
      metrics: {
        default: () => {
          return {}
        }
      },
    },
    data () {
      return {
        tagColor: 'blue'
      }
    },
    created () {
    },
    computed:{
    },
    methods: {
    }
  }
</script>

<style scoped>
</style>